<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
    <%
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ request.getContextPath()+"/";
%>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="<%=basePath %>css/list.css">
		<link href="<%=basePath %>css/H-ui.min.css" rel="stylesheet" type="text/css" />
		<script src="<%=basePath %>js/jquery.min.js"></script>
		<link rel="stylesheet" href="<%=basePath %>lib/icheck/icheck.css">
        <script src="<%=basePath %>lib/My97DatePicker/WdatePicker.js"></script>
        <script src="<%=basePath %>lib/icheck/jquery.icheck.min.js"></script>
        <script src="<%=basePath %>lib/bootstrap-modal/2.2.4/bootstrap-modalmanager.js"></script>
        <script src="<%=basePath %>lib/bootstrap-modal/2.2.4/bootstrap-modal.js"></script>
        <link rel="stylesheet" type="text/css" href="<%=basePath %>/css/simditor.css" />
		<script type="text/javascript" src="<%=basePath %>/js/module.js"></script>
		<script type="text/javascript" src="<%=basePath %>/js/hotkeys.js"></script>
		<script type="text/javascript" src="<%=basePath %>/js/uploader.js"></script>
		<script type="text/javascript" src="<%=basePath %>/js/simditor.js"></script>
		<script src="<%=basePath %>js/H-ui.js"></script>
        <style>
        	.input-text, .textarea{
        		width: auto;
        	}
        	
        	table{
        		z-index: 99;
        	}
        	
        	#updateBox{
        		z-index: -99;
        	}
        </style>
        <script type="text/javascript">

 		$(function() {
  		    	$(".hoverShowThisImg").click(function(){
  	    			var src = $(this).attr("id");
  	    			$("#showImg").attr("src",src);
  	    			$("#clickShowModal").click();  
	        	});
  		    	 
 		});

        </script>
    </head>
    <body>
    	<div class="connect_wrap">
    <ul id="Huifold1" class="Huifold">
    	  
		  <li class="item">
		    <h4>查询条件<b>+</b></h4>
		    <div class="info" style="border: 1px solid #E8EAEA;padding-bottom: 18px;">
		    	<form action="<%=basePath %>imgInfo/imgList" id="form" method="get">
		    		<div class="row">
			    		<div >
			    			<div class="input-group">
							  <span class="input-group-addon">图片名称: </span>
							  <input type="text" class="input-text size-S" name="imgName" value="${page.conMap.imgName }" placeholder="输入名称模糊查询"/>
							  
							</div>
			    		</div>
			    	</div>
			    	
			    	<br/>
			    	<div class="row">
			    		<div class="col-sm-12">
			    			<input type="submit" value="查询"  class="btn btn-primary col-push-11" style="float:left;"/>
			    			<a class="btn btn-primary " href="<%=basePath %>imgInfo/downLoadImg/0" style="float:right;margin-left:10px;">添加</a> 
			    		</div>
			    	</div>
			    	
			    	<br/>
			    	<br/>
			    	<br/>
		    	</form>
		    </div>
		  </li>
		  
		</ul>
    		
    	<br/>
    	
    	<table class="table table-border table-bordered table-striped table-hover">
    		<tr>
    			<td>编号</td>
    			<td>图片名称</td>
    			<td>图片</td>
    			<td>图片路径</td>
    			<td>添加时间</td>
    			<td>操作</td>
    		</tr>
    		<c:forEach var="item" items="${page.results }">
    			<tr>
	    			<td>${item.id }</td>
	    			<td>${item.imgName }</td>
	    			<td><span id="${item.imgUrl}" class="hoverShowThisImg">查看</span></td>
	    			<td>${item.imgUrl }</td>
	    			<td>${item.createTime }</td>
	    			<td>
	    				<a class="btn btn-primary "  href="<%=basePath %>imgInfo/deleteImg/${item.id}" onclick="return confirm('确实要删除吗？')">删除</a> 
	    				<a class="btn btn-primary "  href="<%=basePath %>imgInfo/downLoadImg/${item.id}">修改</a> 
	    			</td>
	    		</tr>
    		</c:forEach>
		</table>
    	</div>
    	
    	
		<!-- 加载图片 -->
    	<a data-toggle="modal" href="#myModal" id="clickShowModal" class="btn btn-primary size-L" style="display:none">点击显示</a>
		<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		   <div class="modal-body">
				<img src="" alt="" id="showImg" style="width:100%;height:90%;" />		     	
		   </div>
		</div> 
		
		 
		
		<!-- 分页 -->
         <c:if test="${page.totalPageNo > 1 }">
        	<div class="fanye_div">
	            <ul class="fanye">
	                <li>共  ${page.totalCount }  条</li>
	                <li><a href='<%=basePath %>${page.url}?pageNo=1&title=${page.conMap.title}'>首页</a></li>
	                  <c:if test="${page.actulPageNo > 1 }">
	                	<li><a href='<%=basePath %>${page.url}?pageNo=${page.actulPageNo -1 }&title=${page.conMap.title}'>上一页</a></li>
	                </c:if>
	                <c:forEach var="pno" items="${page.showNums }">
						<c:choose>
							<c:when test="${pno == page.actulPageNo}">
								<li class="current"><a href='<%=basePath %>${page.url}?pageNo=${pno }&title=${page.conMap.title}'>${pno }</a></li>			
							</c:when>
							<c:otherwise>
								<li><a href='<%=basePath %>${page.url}?pageNo=${pno  }&title=${page.conMap.title}'>${pno }</a></li>		
							</c:otherwise>
						</c:choose>
	                </c:forEach>
					<c:if test="${page.actulPageNo  < page.totalPageNo }">
	                	<li><a href='<%=basePath %>${page.url}?pageNo=${page.actulPageNo+1 }&title=${page.conMap.title}'>下一页</a></li>
	                </c:if>
	                <li><a href='<%=basePath %>${page.url}?pageNo=${page.totalPageNo }&title=${page.conMap.title}'>尾页</a></li>
	            </ul>
	        </div>
        </c:if>
	 </body>
	 <script>
	    $(function(){
	    	$.Huifold("#Huifold1 .item h4","#Huifold1 .item .info","fast",1,"click");
	    	
	    	$('.orderByRadio').iCheck({
	    		checkboxClass: 'icheckbox-blue',
	    		radioClass: 'iradio-blue',
	    		increaseArea: '20%'
	    	});
	    	
	    	$("#Huifold1 .item h4").click();
	    	
	    });
	    
	 
	 </script>
</html>


